<template>
	<view class="distributor_recruit_container">
		<view class="distributor_recruit_box">
			<!-- 顶部 -->
			<view class="top_box">
				<view class="top_img_box">
					<canvas style="width: 100%;height:100%;" canvas-id="code">
						<img :src="posterShowImg" alt="" class="top_img" />
					</canvas>
				</view>
			</view>

			<!-- 底部 -->
			<view class="bottom_box">
				<!-- <view class="bottom_copywriting_box">
					<view class="copywriting_icon_box">
						<image src="/static/shop/Copywritingicon-.png" mode="" class="copywriting_icon"></image>
					</view>
					<view class="copywriting_title">
						更换文案
					</view>
				</view>
				<view class="copywriting_input_box">
					<view class="copywriting_input">
						{{ copywritingTitle }}
					</view>
					<view class="refresh_icon_box" @click="handleCopy(copywritingTitle)">
						<image src="/static/shop/icon-copy-shop.png" mode="" class="refresh_icon"></image>
					</view>
					<view class="refresh_icon_box" @click="handleRefresh">
						<image src="/static/shop/icon-refresh.png" mode="" class="refresh_icon"></image>
					</view>
				</view> -->

				<view class="bottom_components_box">
					<view class="components_icon_box">
						<image src="/static/my/icon-components.png" mode="" class="components_icon"></image>
					</view>
					<view class="components_title">
						选择模板
					</view>
				</view>

				<view class="components_img_box">
					<view class="components_img_all" v-for="(item,index) in shopImgList" :key="index"
						@click="handleComponents(item, index)">
						<image :src="item.img" mode="" class="components_img"></image>

						<view class="mask" v-if="isActive == index"></view>
						<view class="right_icon_box" v-if="isActive == index">
							<image src="/static/my/icon-right.png" mode="" class="right_icon"></image>
						</view>
					</view>
				</view>

				<view class="share_box">
					<view class="share_all" v-for="(item, index) in shareList" :key="index" @click="handleShare(item)">
						<view class="share_img_box">
							<image :src="item.img" mode="" class="share_img"></image>
						</view>
						<view class="share_title">
							{{ item.title }}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				shareList: [{
						id: '0',
						img: 'https://file-1314054542.cos.ap-shanghai.myqcloud.com/cos_file/wechat_xcx/66f7a782114d9_1727506306.png',
						title: '微信好友'
					},
					{
						id: '1',
						img: 'https://file-1314054542.cos.ap-shanghai.myqcloud.com/cos_file/wechat_xcx/66f7a762ccf6f_1727506274.png',
						title: '朋友圈'
					},
					{
						id: '2',
						img: 'https://file-1314054542.cos.ap-shanghai.myqcloud.com/cos_file/wechat_xcx/66f7a774ecb69_1727506292.png',
						title: '保存本地'
					},
					{
						id: '3',
						img: 'https://file-1314054542.cos.ap-shanghai.myqcloud.com/cos_file/wechat_xcx/66f7a75607448_1727506262.png',
						title: '复制链接' 
					}
				],
				shopImgList: [],
				isActive: 0,
				pageObj: {
					pageNow: 1,
					pageSize: 50
				},
				posterObj: {},
				posterShowImg: '',
				posterShowShareImg: '',
				timesTamp: '',
				promotionSahreUrl: ''
			}
		},
		onLoad() {
			this.timesTamp = Date.parse(new Date())
			this.getPosterList()
		},
		methods: {
			// 获取海报
			getPosterList() {
				this.$request('/api/getPosterList', {
					type: '1',
					status: '1',
					page_now: this.pageObj.pageNow,
					page_size: this.pageObj.pageSize

				}, 'GET').then(res => {
					if (res.code == 1) {
						this.shopImgList = res.data
						this.posterObj = res.data[0]
						this.getFxUserPoster()
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
						return
					}
				})
			},

			// 创建招募海报
			getFxUserPoster() {
				this.$request('/api/getFxUserPoster', {
					poster_id: this.posterObj.id,
					type: '1',
				}, 'GET').then(res => {
					if (res.code == 1) {
						this.posterShowImg = res.data + '?v=' + this.timesTamp
						this.posterShowShareImg = res.data
						this.promotionSahreUrl = res.url
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
						return
					}
				})
			},

			// 选择模板
			handleComponents(item, index) {
				this.isActive = index
				this.posterObj = item
				this.getFxUserPoster()
			},

			// 选择分享
			handleShare(val) {
				const that = this
				if (val.title == '微信好友') {

				} else if (val.title == '朋友圈') {

				} else if (val.title == '保存本地') {
					// 获取要保存的图片URL或者Base64数据
					// let imageUrl = this.posterShowShareImg; // 或者 let base64Data = 'data:image/jpeg;base64,...'

					// // 创建一个隐藏的<a>标签元素
					// const linkElement = document.createElement('a');
					// linkElement.href = imageUrl || `data:${mimeType};base64,${base64Data}`;
					// linkElement.download = 'image.jpg'; // 设置文件名

					// // 模拟点击事件触发下载
					// document.body.appendChild(linkElement);
					// linkElement.click();
					// document.body.removeChild(linkElement);
					uni.showToast({
						title: '长按海报可保存到相册',
						icon: 'none'
					})
				} else if (val.title == '复制链接') {
					let url = that.promotionSahreUrl;
					let oInput = document.createElement('input');
					oInput.value = url;
					document.body.appendChild(oInput);
					oInput.select(); // 选择对象;
					document.execCommand("Copy"); // 执行浏览器复制命令
					// 复制成功提示;
					uni.showToast({
						title: '复制成功',
						icon: 'none',
						duration: 2000
					});
					oInput.remove()

				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.distributor_recruit_container {

		.distributor_recruit_box {

			.top_box {
				display: flex;
				justify-content: center;
				padding: 57rpx 0;

				.top_img_box {
					width: 544rpx;
					height: 868rpx;

					.top_img {
						width: 100%;
						height: 100%;
						border-radius: 12rpx;
						-webkit-touch-callout: default; // 要配置这行关键代码，不然可能不生效
					}
				}
			}

			.bottom_box {
				width: 750rpx;
				background: #FFFFFF;

				.bottom_copywriting_box {
					display: flex;
					align-items: center;
					padding: 34rpx 27rpx 0 36rpx;

					.copywriting_icon_box {
						width: 36rpx;
						height: 36rpx;

						.copywriting_icon {
							width: 100%;
							height: 100%;
						}
					}

					.copywriting_title {
						font-size: 30rpx;
						font-family: Source Han Sans CN;
						font-weight: 500;
						color: #333333;
					}
				}

				.copywriting_input_box {
					display: flex;
					align-items: center;
					margin: 28rpx 27rpx 36rpx 36rpx;

					.copywriting_input {
						display: flex;
						align-items: center;
						width: 623rpx;
						height: 70rpx;
						border: 2rpx solid #E6E6E6;
						border-radius: 10rpx;
						font-size: 26rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #808080;
						padding: 5rpx 0 5rpx 30rpx;
					}

					.refresh_icon_box {
						width: 36rpx;
						height: 36rpx;
						margin-left: 26rpx;

						.refresh_icon {
							width: 100%;
							height: 100%;
						}
					}
				}

				.bottom_components_box {
					display: flex;
					align-items: center;
					padding: 20rpx 27rpx 32rpx 36rpx;

					.components_icon_box {
						width: 36rpx;
						height: 36rpx;
						margin-right: 10rpx;

						.components_icon {
							width: 100%;
							height: 100%;
						}
					}

					.components_title {
						font-size: 30rpx;
						font-family: Source Han Sans CN;
						font-weight: 500;
						color: #333333;
					}
				}

				.components_img_box {
					display: flex;
					// width: 100%;
					overflow-x: scroll;
					margin: 0 37rpx 0;

					.components_img_all {
						position: relative;
						margin-right: 19rpx;

						.components_img {
							width: 175rpx;
							height: 279rpx;
							border-radius: 12rpx;
						}

						.mask {
							width: 100%;
							/* 遮罩层宽度与容器等宽 */
							height: 100%;
							/* 遮罩层高度与容器等高 */
							background-color: rgba(0, 0, 0, 0.5);
							/* 设置背景色及透明度 */
							position: absolute;
							/* 将遮罩层放置于容器内部 */
							top: 0;
							left: 0;
							border-radius: 12rpx;
						}

						.right_icon_box {
							position: absolute;
							top: 10rpx;
							right: 12rpx;
							width: 40rpx;
							height: 40rpx;

							.right_icon {
								width: 100%;
								height: 100%;
							}
						}
					}
				}

				.share_box {
					display: flex;
					justify-content: space-evenly;
					padding-bottom: 26rpx;

					.share_all {
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;

						.share_img_box {
							width: 82rpx;
							height: 82rpx;
							margin: 33rpx 0 21rpx;

							.share_img {
								width: 100%;
								height: 100%;
							}
						}

						.share_title {
							font-size: 30rpx;
							font-family: Source Han Sans CN;
							font-weight: 400;
							color: #333333;
						}
					}
				}
			}
		}
	}
</style>